<template>
  <div class="chart-box">
    <template v-if="hasData">
      <div class="chart">
        <div ref="chartRef"></div>
      </div>
      <div class="box">
        <ul>
          <li>
            稳定程度<span>{{ Math.round(data?.stabilityScore || 0) }}分</span>
          </li>
          <li>
            职业技能<span>{{ Math.round(data?.skillScore || 0) }}分</span>
          </li>
        </ul>
        <br />
        <ul>
          <li>
            工作经历<span>{{ Math.round(data?.expScore || 0) }}分</span>
          </li>
          <li>
            教育背景<span>{{ Math.round(data?.eduScore || 0) }}分</span>
          </li>
        </ul>
      </div>
    </template>
    <a-empty v-else></a-empty>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ResumeService from '@/api/resume';
// import { echarts } from '@/utils/echarts';
// import { EChartsOption } from 'echarts/types/dist/shared';

interface Resp {
  eduScore: number;
  expScore: number;
  filename: string;
  skillScore: number;
  stabilityScore: number;
  totalScore: number;
  uploadTime: string;
}

const chartData = ref<
  {
    value: number;
    name: string;
  }[]
>([]);
const data = ref<Resp>();
const chartRef = ref<HTMLDivElement>();
// let ei: echarts.ECharts;
const hasData = ref(true);

function chartResize() {
  // ei.resize();
}

async function renderChart() {
  // const indicator = chartData.value.map(t => {
  //   return {
  //     name: t.name,
  //     max: 100,
  //   };
  // });
  // const values = chartData.value.map(t => t.value)!;

  // const option: EChartsOption = {
  //   title: {
  //     show: false,
  //   },
  //   legend: {
  //     show: false,
  //   },
  //   color: ['#6285FF'],
  //   radar: {
  //     indicator,
  //     shape: 'circle',
  //     splitNumber: 4,
  //     axisName: {
  //       color: '#000',
  //     },
  //     splitLine: {
  //       lineStyle: {
  //         dashOffset: 5,
  //         color: '#f6f6f6',
  //       },
  //     },
  //     splitArea: {
  //       areaStyle: {
  //         color: ['#fff'],
  //       },
  //     },
  //     axisLine: {
  //       show: true,
  //       lineStyle: {
  //         dashOffset: 5,
  //         color: '#f6f6f6',
  //       },
  //     },
  //   },
  //   series: {
  //     type: 'radar',
  //     symbolSize: 6,
  //     lineStyle: {
  //       color: '#6285FF',
  //       width: 1,
  //     },

  //     areaStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  //         { offset: 0, color: '#6285FF' },
  //         { offset: 1, color: 'rgba(2, 77, 255, 0.07)' },
  //       ]),
  //     },
  //     data: [{ value: values }],
  //   },
  // };

  // ei.setOption(option, true);
}

async function fetchPageData() {
  const resp = await ResumeService.selectResumeModel<Resp>({
    seekerResumeTypeEnum: 'online',
  });
  if (resp.code === 200) {
    data.value = resp.data;
    if (!data.value) {
      hasData.value = false;
      return;
    }

    chartData.value = [
      {
        name: '教育背景',
        value: resp.data?.eduScore || 0,
      },
      {
        name: '工作经历',
        value: resp.data?.expScore || 0,
      },
      {
        name: '职业技能',
        value: resp.data?.skillScore || 0,
      },
      {
        name: '稳定程度',
        value: resp.data?.stabilityScore || 0,
      },
    ];
    renderChart();
  }
}

onMounted(() => {
  fetchPageData();
  // if (chartRef.value) {
  //   ei = echarts.init(chartRef.value!);
  //   window.addEventListener('resize', chartResize);
  // }
});

onUnmounted(() => {
  window.removeEventListener('resize', chartResize);
});
</script>

<style scoped lang="less">
.chart-box {
  position: absolute;
  left: 0;
  top: 36px;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;

  .chart {
    div {
      height: 310px;
    }
  }
  .box {
    box-sizing: border-box;
    padding-left: 30%;
    display: flex;
    margin-top: 51px;
    ul {
      &:first-child {
        margin-right: 50px;
      }
      li {
        &:first-child {
          margin-bottom: 21px;
        }

        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #141c37;
        line-height: 16px;
        span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #141c37;
          margin-left: 10px;
        }
      }
    }
  }
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
</style>
